<template>
	<view>
		<u-popup v-model="show" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle" border-radius="24" :mask-close-able="false">
		<view class="flex-col section_3_b">
		  <view class="flex-col group_b">
		    <text class="self-start text_b">同步会员</text>
		    <!-- <image
		      class="shrink-0 self-end image"
		      src="https://ide.code.fun/api/image?token=689aefa2d26a7d0011a63e23&name=f1a9cbe2f885f3552ecca77e06a7e881.png"
		    /> -->
		  </view>
		  <view class="flex-col mt-17">
		    <view class="flex-col justify-start items-start text-wrapper_b">
		      <input v-model="mobile" class="text_2_b" placeholder="请输入平台原有账号" type="text"/>
		    </view>
		    <view class="flex-row group_2_b">
		      <view @click="cancelPop" class="flex-col justify-start items-center text-wrapper_2_b"><text class="font_b text_3_b">取消</text></view>
		      <view @click="confirmPop" class="ml-10 flex-col justify-start items-center text-wrapper_3_b">
		        <text class="font_b text_4_b">确定</text>
		      </view>
		    </view>
		  </view>
		</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
			      value: false,
			      type: Boolean
			    }
		},
		data() {
			return {
				mobile: '',
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.2)'
				},
			}
		},
		methods: {
			// changeMobile(e){
			//       console.log(e,'eeeeeeeeeee')
			//       this.mobile = e.detail.value;
			//     },
			    
			    cancelPop() {
			      this.$emit("closeShow");
			    },
			    confirmPop(){
					if(this.mobile == ''){
						uni.showToast({
							title: '平台原有账号不能为空',
							icon: 'none'
						})
						return
					}
			      this.$emit("confirm",this.mobile);
			    }
		}
	}
</script>

<style lang="less" scoped>
@import url("../../common/css/common.css");
.mt-17 {
  margin-top: 34rpx;
}
.section_3_b {
  padding: 30rpx 30rpx 39rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}
.group_b {
  padding-left: 20rpx;
  height: 49rpx;
}
.text_b {
  margin-top: 16rpx;
  color: #000000;
  font-size: 34rpx;
  font-family: PingFang SC;
  line-height: 33rpx;
}
.image_b {
  margin-top: -49rpx;
  width: 24rpx;
  height: 25rpx;
}
.text-wrapper_b {
  margin: 0 4rpx;
  padding: 32rpx 0;
  background-color: #ffffff;
  border-radius: 12rpx;
  width: 532rpx;
  border-left: solid 1rpx #dddddd;
  border-right: solid 1rpx #dddddd;
  border-top: solid 1rpx #dddddd;
  border-bottom: solid 1rpx #dddddd;
}
.text_2_b {
  margin-left: 22rpx;
  color: #aeaeae;
  font-size: 24rpx;
  font-family: PingFang SC;
  line-height: 23rpx;
}
.group_2_b {
  padding-top: 40rpx;
}
.text-wrapper_2_b {
  padding: 30rpx 0;
  background-color: #effaf8;
  border-radius: 44rpx;
  width: 260rpx;
  height: 88rpx;
}
.font_b {
  font-size: 30rpx;
  font-family: PingFang SC;
  line-height: 28rpx;
}
.text_3_b {
  color: #009d67;
}
.text-wrapper_3_b {
  padding: 30rpx 0;
  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
  border-radius: 44rpx;
  width: 260rpx;
  height: 88rpx;
}
.text_4_b {
  color: #ffffff;
}
</style>
